package myJs.common

import myJs.Implicits._
import myJs.MyPages
import myJs.api.Api
import myJs.cps.{ImageViewCp, Style}
import myJs.myPkg._
import myJs.myPkg.highcharts._
import myJs.myPkg.reactHookForm.{ReactHookForm, UseFormOptions}
import myJs.tool.Tool
import org.scalajs.dom.html
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import shared.pojo.Sample._
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.{useEffect, useState}
import slinky.core.facade.{Fragment, React}
import slinky.web.html._

import scala.scalajs.js
import scala.scalajs.js.JSON

/**
 * Created by yz on 21/1/2022
 */
@react object BasicViewCp {

  case class Props(
                    sampleInfo: SampleInfo
                  )

  val component = FunctionalComponent[Props] { props =>

    Fragment(

      div(className := "form-group",
        label(className := "control-label col-sm-2 col-xs-2", "日期:"),
        div(className := "col-sm-4 col-xs-6",
          p(className := "form-control-static", s"${props.sampleInfo.date}")
        ),
        label(className := "control-label col-sm-2 col-xs-2", "地点:"),
        div(className := "col-sm-4 col-xs-6",
          p(className := "form-control-static", s"${props.sampleInfo.address}")
        )
      ),

      div(className := "form-group",
        label(className := "control-label col-sm-2", "海拔:"),
        div(className := "col-sm-4",
          p(className := "form-control-static", s"${props.sampleInfo.elevation}")
        ),
        label(className := "control-label col-sm-2", "样线号:"),
        div(className := "col-sm-4",
          p(className := "form-control-static", s"${props.sampleInfo.sampleLineNumber}")
        ),
      ),

      div(className := "form-group",
        label(className := "control-label col-sm-2", "经度:"),
        div(className := "col-sm-4",
          p(className := "form-control-static", s"${props.sampleInfo.longitude}")
        ),
        label(className := "control-label col-sm-2", "纬度:"),
        div(className := "col-sm-4",
          p(className := "form-control-static", s"${props.sampleInfo.latitude}")
        ),
      ),

      div(className := "form-group",
        label(className := "control-label col-sm-2", "样品类型:"),
        div(className := "col-sm-4",
          p(className := "form-control-static", s"${props.sampleInfo.sampleType}")
        )
      ),

      div(className := "form-group",
        label(className := "control-label col-sm-2", "样品照片:"),
        div(className := "col-sm-10",
          ImageViewCp(id = props.sampleInfo.id, images = props.sampleInfo.serverImages)
        )
      ),

      div(className := "form-group",
        label(className := "control-label col-sm-2", "新鲜程度:"),
        div(className := "col-sm-4",
          p(className := "form-control-static", s"${props.sampleInfo.freshness}")
        ),
        label(className := "control-label col-sm-2", "采集人:"),
        div(className := "col-sm-4",
          p(className := "form-control-static", s"${props.sampleInfo.gatherer}")
        )
      ),

      div(className := "form-group",
        label(className := "control-label col-sm-2", "天气:"),
        div(className := "col-sm-4",
          p(className := "form-control-static", s"${props.sampleInfo.weather}")
        ),
      ),

    )





  }


}
